<!--店招-->
<template>
    <div class="qkStoreHeader">
        <!--        轮播-->
        <div class="c_item2" >
            <div class="i_header">
                <div class="h_imgBox">
                    <Swiper class="image-carsousel-swiper"  :autoPlay='true' :showIndicator='true' :interval="interval" duration="500">
                        <Slide class="image-carsousel-slide" v-for="(item,index) in prop.arr" :key="index">
                            <img  class="image-carsousel-image" :src="item.imgUrl" alt="">
                        </Slide>
                    </Swiper>

                </div>
                <div class="h_logo">
                    <img :src="store.storeLogoUrl"/>
                </div>
                <div class="h_name">
                    {{store.storeName}}
                </div>
            </div>
            <div class="i_content" v-if="prop.storeDesc != ''">
                {{prop.storeDesc}}
            </div>
            <div class="i_title">
                <div class="active">推荐</div>
                <div>全部</div>
                <div>新品</div>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        getInitStoreBanner
    } from "@/api/base/goods/seller/goods";
    import { Swiper, Slide } from 'vue-swiper-component';
    export default {
        components: {
            Swiper,
            Slide
        },
        name: 'qkStoreBanner', // 这个名字很重要，它就是未来的标签名<qk-text></qk-text>
        props: {
            prop: {
                type: Object,
                default(){
                    return {
                        arr:[
                            {
                                imgUrl:'https://keytest.oss-cn-zhangjiakou.aliyuncs.com/upload/store/1191974507350003713/2020/04/d26e22bf81084b0eb8a32036e3b86497_968-380.jpg'
                            }
                        ],
                        storeDesc:"",
                    }
                }
            },
            store: {
                type: Object,
                default(){
                    return {}
                }
            }
        },
        data(){
            return {
                interval:2500,
            }
        },
        methods:{
            //获取默认的banner图片
            getInitStoreBanner(){
                getInitStoreBanner().then(res=>{
                    if(res.data.code==200){
                        if(!this.prop.arr.bannerType){
                            this.prop.arr[0].imgUrl=res.data.data
                        }

                    }
                })
            },
        },

    }
</script>

<style lang="scss" scoped>
    .qkStoreHeader{
        width: 100%;
        height: 100%;
    }
    img{
        display: block;
        width: 100%;
        height: 100%;
    }
    .image-carsousel-swiper{
        height:187px;
    }
    .c_item2{
        .i_header{
            img{
                width: 100%;
                height: 100%;
                display: block;
            }
            .h_imgBox{
                width: 100%;
                height: 187px;
                position:relative;
                z-index:0;
            }
            .h_logo{
                width: 50px;
                height: 50px;
                margin-top: -20px;
                margin-left: 10px;
                border: 1px solid #fff0fb;
                border-radius: 1px;
                position:relative;
                z-index:1;
            }
            .h_name{
                padding: 5px 10px;
                font-size: 18px;
                font-weight: 700;
            }
            .h_draess{
                padding: 5px 10px;
                font-size: 14px;
                color: #CCCCCC;
                span{
                    font-weight: 700;
                    color: #000000;
                }
            }
        }
    }
    .i_content{
        padding: 10px 10px;
        line-height: 26px;
        font-size: 14px;
        word-wrap: break-word;
    }
    .i_title{
        display: flex;
        justify-content: space-around;
        font-size: 17px;
        font-weight: 700;
        .active{
            color: #fa436a;
        }
    }
</style>
